<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>事件广播</title>
    <link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap3/css/dashboard.css">
    <script src="../lib/angularjs/angular.js"></script>
    <script src="../lib/angularjs/angular-resource.js"></script>
    <style>body{margin:10px 80px;}</style>
</head>
<body ng-app="app01">
<div class="panel panel-primary" >
    <div class="panel-heading"><b>事件广播</b></div>
    <div class="panel-body">
        <h4>$emit:从子级作用域传到父级作用域。格式：$emit(eventName,args)</h4>
        <h4>$broadcast：作用是将事件从父级作用域传播至子级作用域。格式：$broadcast(eventName,args)</h4>
        <h4>$on：用于监控从子级或父级作用域中传播的事件以及相应的数据</h4>
    </div>
    <div class="panel-footer">
        <h4>event.targetScope：传播事件的作用域</h4>
        <h4>event.currentScope：接收事件的作用域</h4>
        <h4>event.name：传播事件的名称</h4>
        <h4>event.stopPropagation()：阻止事件冒泡传播，仅对$emit事件中有效</h4>
        <h4>event.preventDefault()：把defaultPrevented标志设置为true。尽管不能停止事件的传播，我们可以子作用域无需处理这个事件（也就是说，可以安全的忽略它们）。</h4>
        <h4>event.defaultPrevented：如果调用了preventDefault()会把defaultPrevented设置为true</h4>
    </div>
</div>
<div class="panel panel-primary" >
    <div class="panel-heading"><b>事件广播</b></div>
    <div class="panel-body">
        <form name="test">
            <div ng-controller="Parent">
                这里是父级Div
                <div ng-controller="Self">
                    这里是子级SelfDiv
                    <input type="button" ng-click="toParent()" value="向ParentDiv传播事件" />
                    <input type="button" ng-click="toChild()" value="向ChildDiv传播事件" />
                    <div ng-controller="Child">
                        这里是子级ChildDiv
                        <input type="button" ng-click="toTop()" value="向上传播事件" />
                    </div>
                </div>
                <div ng-controller="Borther">
                    这里是Self的兄弟BortherDiv
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    var myApp=angular.module('app01',[]);
</script>
<script>
    //控制器Self
    myApp.controller("Self", function ($scope,$window) {
        //button的传播事件
        $scope.toParent = function () {
            //注册一个向上传播的事件，eventName:'FromSelf', data:oneObject
            $scope.$emit("FromSelf", { divName: "Self", description: "向父传播数据" });
        };
        $scope.toChild = function () {
            //注册一个向下传播的事件，eventName:'FromSelf', data:oneObject
            $scope.$broadcast("FromSelf", { divName: "Self", description: "向子传播数据" });
        };
        $scope.name = "Self";
        $scope.$on("FromChild", function (event, data) {
            $window.alert("【Self】当前节点" + event.currentScope.name + "截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
        });

    });
    //控制器Parent
    myApp.controller("Parent", function ($scope, $window) {
        $scope.name = "Parent";
        //$on用于事件
        $scope.$on("FromSelf", function (event, data) {
            $window.alert("【Parent】当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
        });
        $scope.$on("FromChild", function (event, data) {
            $window.alert("【Parent】当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
        });
    });
    //控制器Child
    myApp.controller("Child", function ($scope, $window) {
        $scope.name = "Child";
        //$on用于截获来自父级作用域的事件
        $scope.$on("FromSelf", function (event, data) {
            $window.alert("【Child】当前节点" + event.currentScope.name +"截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
        });
        //button的传播事件
        $scope.toTop = function () {
            //注册一个向上传播的事件，eventName:'FromChild', data:oneObject
            $scope.$emit("FromChild", { divName: "Child", description: "向上播数据" });
        };
    });
</script>
</html>